﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="/design/album/tlps/4/res/style.css" rel="stylesheet" />
<script src="/JS/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/design/album/tlps/viewport.js"></script>
</head>
<body>
<div id="bac"></div>
<div id="container">
    <div id="bgbox">
        <img id="lvxing_bg" src="/design/album/tlps/4/res/bg.jpg" alt="" />

        <div id="lvxing_biaoqian">
            <img src="/design/album/tlps/4/res/biaoqian.png" alt="" />
            <div id="contentbox">
                <div id="titlecontent"></div>
            </div>
        </div>

    </div>

    <div id="coverbox">
        <img id="lvxing_cover" src="/design/album/tlps/4/res/fovered.png" alt="" />

    </div>
    <div id="page4">
        <div id="div41s">
            <img id="img41s" style="position:absolute" alt="" />
            <span id="word41s" class="showwords"></span>
        </div>
        <div id="div41h">
            <img id="img41h" style="position:absolute" alt="" />
            <span id="word41h" class="showwords"></span>
        </div>
        <div id="div42s">
            <img id="img42s" style="position:absolute" alt="" />
            <span id="word42s" class="showwords"></span>
        </div>
        <div id="div42h">
            <img id="img42h" style="position:absolute" alt="" />
            <span id="word42h" class="showwords"></span>
        </div>
    </div>
    <div id="page1">
        <div id="div1s">
            <img id="img1s" style="position:absolute" alt="" />
            <span id="word1s" class="showwords"></span>
        </div>
        <div id="div1h">
            <img id="img1h" style="position:absolute" alt="" />
            <span id="word1h" class="showwords"></span>
        </div>
        <img id="lvxing_hua1ying" src="/design/album/tlps/4/res/huayingzi.png" alt="" />
        <img id="lvxing_hua2ying" src="/design/album/tlps/4/res/huayingzi.png" alt="" />
        <img id="lvxing_hua3ying" src="/design/album/tlps/4/res/huayingzi.png" alt="" />
        <img id="lvxing_hua1" src="/design/album/tlps/4/res/hua2.png" alt="" />
        <img id="lvxing_hua2" src="/design/album/tlps/4/res/hua3.png" alt="" />
        <img id="lvxing_hua3" src="/design/album/tlps/4/res/hua2.png" alt="" />
    </div>
    <div id="page2" style="-webkit-transform-origin: 50% 100%">
        <div id="div21h">
            <img id="img21h" style="position:absolute" alt="" />
            <span id="word21h" class="showwords"></span>
        </div>
        <div id="div21s">
            <img id="img21s" style="position:absolute" alt="" />
            <span id="word21s" class="showwords"></span>
        </div>
        <div id="div22h">
            <img id="img22h" style="position:absolute" alt="" />
            <span id="word22h" class="showwords"></span>
        </div>
        <div id="div22s">
            <img id="img22s" style="position:absolute" alt="" />
            <span id="word22s" class="showwords"></span>
        </div>
    </div>
    <div id="lvxing_jiaoyin">
        <div style="position:absolute;top:-111px;left:-83px;">
            <img id="jiaoya1" src="/design/album/tlps/4/res/jiaoya.png" style="position:absolute;width:47px;-webkit-transform: translate(44px,0px) scale(-1,1) rotate(-115deg);opacity:0;" alt="" />
            <img id="jiaoya3" src="/design/album/tlps/4/res/jiaoya.png" style="position:absolute;width:47px;-webkit-transform: translate(227px,90px) scale(-1,1) rotate(-136deg);opacity:0;" alt="" />
            <img id="jiaoya2" src="/design/album/tlps/4/res/jiaoya.png" style="position:absolute;width:47px;-webkit-transform: translate(109px,90px) scale(1,1) rotate(-248deg);opacity:0;" alt="" />
            <img id="jiaoyin8" src="/design/album/tlps/4/res/jiaoya.png" style="position:absolute;width:47px;-webkit-transform: translate(-83px,19px) scale(1,1) rotate(-261deg);opacity:0;" alt="" />
        </div>
        <img id="jiaoyin7" src="/design/album/tlps/4/res/jiaoya.png" style="position:absolute;width:47px;-webkit-transform: translate(-187px,-200px) scale(-1,1) rotate(242deg);opacity:0;" alt="" />
        <img id="jiao1" src="/design/album/tlps/4/res/jiaoya.png" style="position:absolute;width:47px;-webkit-transform: translate(-188px,-211px) scale(-1,1) rotate(-117deg);opacity:0;" alt="" />
        <img id="jiao2" src="/design/album/tlps/4/res/jiaoya.png" style="position:absolute;width:47px;-webkit-transform: translate(-188px,-211px) scale(-1,1) rotate(-117deg);opacity:0;" alt="" />
        <img id="jiao3" src="/design/album/tlps/4/res/jiaoya.png" style="position:absolute;width:47px;-webkit-transform: translate(-188px,-211px) scale(-1,1) rotate(-117deg);opacity:0;" alt="" />
        <img id="jiao4" src="/design/album/tlps/4/res/jiaoya.png" style="position:absolute;width:47px;-webkit-transform: translate(-188px,-211px) scale(-1,1) rotate(-117deg);opacity:0;" alt="" />
    </div>
    <div id="page3">
        <div id="div3s">
            <img id="img3s" style="position:absolute" alt="" />
            <span id="word3s" class="showwords"></span>
        </div>
        <div id="div3h">
            <img id="img3h" style="position:absolute" alt="" />
            <span id="word3h" class="showwords"></span>
        </div>
    </div>



    <div id="lvxing_zhinanzhen" style="display:none">
        <img id="lvxing_pan" src="/design/album/tlps/4/res/N.png" alt="" />
        <img id="lvxing_zhen" src="/design/album/tlps/4/res/z.png" alt="" />
    </div>
    <div id="lvxing_area">
        <img id="lvxing_feiji" src="/design/album/tlps/4/res/feiji.png" alt="" />
    </div>

</div>

<div class="code_div">
<div class="title_div">扫描并分享场景：</div>
<div class="img_div"><img id="shareCode" src="/common/common.ashx?url=" alt="二维码" />
</div>
<div class="bdsharebuttonbox">
<a title="分享到微信" class="bds_weixin" href="#" data-cmd="weixin"></a>
<a title="分享到QQ空间" class="bds_qzone" href="#" data-cmd="qzone"></a>
<a title="分享到新浪微博" class="bds_tsina" href="#" data-cmd="tsina"></a>
<a title="分享到人人网" class="bds_renren" href="#" data-cmd="renren"></a>
<a class="bds_more" href="#" data-cmd="more"></a>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdUrl":document.URL,"bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>
<div class="view_div">这么漂亮的相册&nbsp;→<span><a target="_blank" href="http://v.z01.com/">我也来制作</a></span></div>
</div>
<div class="photo_bottom">免费极速创建<i class="fa fa-hand-o-right"></i><a href="/h5/ListPage.shtml">动力逐浪</a></div>

<div id="loadingdiv">
<div class="loadingword">相册正在加载中<br>请稍等……</div>
</div>
</body>
</html>
<script>
$().ready(function(e) {
    var num = Math.floor(Math.random() * 4) + 1;
    call_me(load_images);
    call_me(on_wx_music_init);
	$("#bac").css("background","url(http://code.z01.com/web/Photo/"+num+".png) top center no-repeat").css("background-size","cover");
	$("#shareCode").attr("src","/common/common.ashx?url="+window.location.href);

});

var album = {};
album.model = "{album}";
album.model.Photos = album.model.Photos.split('|');
var slider_images_url = [];
for (var i = 0; i < album.model.Photos.length; i++) {
    var photo = album.model.Photos[i];
    slider_images_url.push(photo);
}
var e_music_url = album.model.Music + "";
var e_desc = album.model.AlbumName;
document.ontouchmove = function (e) { e.preventDefault(); }

var image_size_width=[];
var image_size_height=[];

var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var timeout0;
var timeout1;
var timeout2;
var timeout3;
var timeout4;
var timeout5;
var delaytime=4000;

var get_pid = function(url)
{
    var index1 = url.indexOf("?");
    if(index1 != -1)
    {
        url = url.substr(0, index1);
    }
    return url.toString().substr(url.lastIndexOf("/") + 1);
}

function id(name)
{
    return document.getElementById(name);
}
function load_images()
{
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];

    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();

    bl_keepload = 'first';
    step_load();      
}

//每次执行加载后5张图片
var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //初步加载X张
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }

}
function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';
    // console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);
    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            show1();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout0 = setTimeout(function()
                {
                    show1();
                },dis_titletime);
        }
    }
}
function image_onload(event)
{
    if(reshow == true)
        return;
    var img=event.target;
    var index = img.index;
    if(index < step_loadnum)
    {
        have_num++;
    }

    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    if((have_num +error_num >= step_loadnum || slider_images_url.length == (have_num + error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;

        if(have_num == 0)
            return;

        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            show1();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout0 = setTimeout(function()
                {
                    show1();
                },dis_titletime);
        }
    }
}
function id(name)
{
    return document.getElementById(name);
}
function show1()
{
    if(reshow == true)
        return;
    if(image_url_index == Onload_imgs_url.length)
        image_url_index = 0;
    setImage('1');
    image_url_index++;

    id('page1').style.display = 'block';
    id('lvxing_hua1ying').style.display = 'block';
    id('lvxing_hua1').style.display = 'block';
    id('lvxing_hua2').style.display = 'block';
    id('lvxing_hua2ying').style.display = 'block';
    id('lvxing_hua3').style.display = 'block';
    id('lvxing_hua3ying').style.display = 'block';

    id('bgbox').style.webkitAnimation = 'bgmove1 1.8s ease-in-out both';
    id('page1').style.webkitAnimation = 'bgmove1 1.8s ease-in-out both';
    id('lvxing_hua1').style.webkitAnimation = 'hua1 2s linear both';
    id('lvxing_hua1ying').style.webkitAnimation = 'hua1ying 2s linear both';
    id('lvxing_hua2').style.webkitAnimation = 'hua2 1.5s ease-out 0.5s both';
    id('lvxing_hua2ying').style.webkitAnimation = 'hua2ying 1.5s ease-out 0.5s both';
    id('lvxing_hua3').style.webkitAnimation = 'hua1 2s linear 1.5s forwards';
    id('lvxing_hua3ying').style.webkitAnimation = 'hua1ying 2s linear 1.5s forwards';
    id('div1h').style.webkitAnimation = 'div1move 2s linear both';
    id('div1s').style.webkitAnimation = 'div1move 2s linear both';

    id('div41h').style.display = 'none';
    id('div41s').style.display = 'none';
    id('page4').style.webkitAnimation = 'page4out 1.8s ease-in-out both';

    cleanshow3();
    cleanjiaoyin();

    timeout1 = setTimeout(show2,4000);
}
function cleanshow1()
{
    if(reshow == true)
        return;
    id('page1').style.display = 'none';
    id('page1').style.webkitAnimation = '';
    id('lvxing_hua1').style.webkitAnimation = '';
    id('lvxing_hua1ying').style.webkitAnimation = '';
    id('lvxing_hua2').style.webkitAnimation = '';
    id('lvxing_hua2ying').style.webkitAnimation = '';
    id('lvxing_hua3').style.webkitAnimation = '';
    id('lvxing_hua3ying').style.webkitAnimation = '';
    id('div1h').style.webkitAnimation = '';
    id('div1s').style.webkitAnimation = '';
    id('lvxing_hua1').style.display = 'none';
    id('lvxing_hua1ying').style.display = 'none';
    id('lvxing_hua2').style.display = 'none';
    id('lvxing_hua2ying').style.display = 'none';
    id('lvxing_hua3').style.display = 'none';
    id('lvxing_hua3ying').style.display = 'none';
    id('div1h').style.display = 'none';
    id('div1s').style.display = 'none';
}
function show2()
{
    if(reshow == true)
        return;
    if(image_url_index == Onload_imgs_url.length)
        image_url_index = 0;
    setImage('21');
    image_url_index++;
    if(image_url_index == Onload_imgs_url.length)
        image_url_index = 0;
    setImage('22');
    image_url_index++;

    id('lvxing_feiji').style.display = 'block';
    id('lvxing_area').style.display = 'block';

    id('page2').style.display = 'block';
    id('bgbox').style.webkitAnimation = 'bgmove2 2s ease-out both';
    id('page1').style.webkitAnimation = 'page1out 2s ease-out both';
    id('div21h').style.webkitAnimation = 'div21hmove 2s ease-in-out both';
    id('div21s').style.webkitAnimation = 'div21hmove 2s ease-in-out both';
    id('div22h').style.webkitAnimation = 'div22hmove 1.5s 1.5s ease-out both';
    id('div22s').style.webkitAnimation = 'div22hmove 1.5s 1.5s ease-out both';
    id('lvxing_area').style.webkitAnimation = 'feiji 3s linear both';
    id('lvxing_feiji').style.webkitAnimation = 'feijia 3s linear both';
    id('lvxing_zhen').style.webkitAnimation = 'zhinanzhen1 2s linear both';

    cleanshow4();
    if(image_url_index == Onload_imgs_url.length)
        image_url_index = 0;
    setImage('3');
    image_url_index++;

    timeout2 = setTimeout(show3,4000);
}
function cleanshow2()
{
    if(reshow == true)
        return;
    id('div21h').style.display = 'none';
    id('div22h').style.display = 'none';
    id('div21s').style.display = 'none';
    id('div22s').style.display = 'none';
    id('lvxing_area').style.display = 'none';
    id('lvxing_feiji').style.display = 'none';
    id('div21h').style.webkitAnimation = '';
    id('div22h').style.webkitAnimation = '';
    id('div21s').style.webkitAnimation = '';
    id('div22s').style.webkitAnimation = '';
    id('lvxing_area').style.webkitAnimation = '';
    id('lvxing_feiji').style.webkitAnimation = '';
    id('page2').style.display = 'none';
    id('page2').style.webkitAnimation = '';
}
function show3()
{
    if(reshow == true)
        return;

    id('page2').style.display = 'block';
    id('page3').style.display = 'block';
    id('lvxing_biaoqian').style.display = 'none';
    id('lvxing_biaoqian').style.webkitAnimation = '';

    id('bgbox').style.webkitAnimation = 'bgmove3 3.5s ease-out both';
    id('page2').style.webkitAnimation = 'page2out 3.5s ease-out both';
    id('div3s').style.webkitAnimation = 'div3smove 3.5s ease-out both';
    id('div3h').style.webkitAnimation = 'div3smove 3.5s ease-out both';
    id('lvxing_zhen').style.webkitAnimation = 'zhinanzhen2 3.5s linear both';

    cleanshow1();
    showjiaoyin();
    if(image_url_index == Onload_imgs_url.length)
        image_url_index = 0;
    setImage('41');
    image_url_index++;
    if(image_url_index == Onload_imgs_url.length)
        image_url_index = 0;
    setImage('42');
    image_url_index++;
    timeout3 = setTimeout(show4,5000)
}
function cleanshow3()
{
    if(reshow == true)
        return;
    id('div3s').style.webkitAnimation = '';
    id('div3s').style.display = 'none';
    id('div3h').style.webkitAnimation = '';
    id('div3h').style.display = 'none';   
}
function show4()
{
    if(reshow == true)
        return;


    id('page3').style.display = 'block';
    id('page4').style.display = 'block';

    id('bgbox').style.webkitAnimation = 'bgmove4 8s linear both';
    id('page4').style.webkitAnimation = 'bgmove4 8s linear both';
    id('lvxing_jiaoyin').style.webkitAnimation = 'jiaoyinmove 8s linear both';
    id('page3').style.webkitAnimation = 'page3out 8s linear both';
    id('lvxing_zhen').style.webkitAnimation = 'zhinanzhen3 8s linear both';

    cleanshow2();
    // if(image_url_index == Onload_imgs_url.length)
    //     image_url_index = 0;
    // setImage('1');
    // image_url_index++;
    timeout4 = setTimeout(show1,9000);
}
function cleanshow4()
{
    if(reshow == true)
        return;
    id('page3').style.display = 'none';
    id('page4').style.display = 'none';
    id('page3').style.webkitAnimation = '';
    id('page4').style.webkitAnimation = '';
}

function showtitle()
{
    if(reshow == true)
        return;
    id('lvxing_biaoqian').style.webkitAnimation = 'fadein 1s linear both';
    id('titlecontent').innerHTML = e_desc;
}

var divwidth = {'1h':400,'1s':373,'21h':432,'21s':280,'22h':350,'22s':230,'3h':440,'3s':400,'41h':400,'41s':400,'42h':383,'42s':380};
var divheight = {'1h':280,'1s':548,'21h':313,'21s':400,'22h':250,'22s':320,'3h':320,'3s':600,'41h':280,'41s':600,'42h':276,'42s':580};

function insertEnter(str,n){
    var len = str.length;
    var strTemp = '';
    if(len > n){
    strTemp = str.substring(0,n);
    str = str.substring(n,len);
    return strTemp+'\n'+str;
    }else{
    return str;
    }
}

function setImage(idname)
{
    if(reshow == true)
        return;
    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        // console.log(Onload_imgs_url[image_url_index]);
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }
    if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];
    var div;
    var div1;
    var divname;

    if(img_bili > 1)
    {
        divname = idname + 'h';
        div = id('div'+idname+'h');
        div1 = id('div'+idname+'s');
    }
    else
    {
        divname = idname + 's';
        div = id('div'+idname+'s');
        div1 = id('div'+idname+'h');
    }

    div.style.display = 'block';
    div1.style.display = 'none';

    var height = divheight[divname];
    var width = divwidth[divname];
   
    var word = id('word' + divname);   
    var word_string = words[get_pid(Onload_imgs_url[image_url_index])];
    if(word_string != undefined)
    {   
        word_string = word_string.replace(/[\n]/ig,''); 
        var word_length = word_string.length;
        word.style.top = "90%";
        if(word_length > 10)
        {
            word_string = insertEnter(word_string, 5);
            word.style.top = "80%";
        }
        word.innerText = word_string;
    }
    else
    {
        word.innerText = "";
    }
    
    var img = id('img'+divname);
    img.src = Onload_imgs_url[image_url_index];
    // console.log(img.src);

    if(img_bili > (width/height))
    {
        img.style.top = '0px';
        img.style.height = height + 'px';
        img.style.width = height*img_bili + 'px';
        img.style.left = -((height*img_bili-width)/2)+'px';
    }
    else
    {
        img.style.left = '0px';
        img.style.width = width+'px';
        img.style.height = width/img_bili + 'px';
        img.style.top = -((width/img_bili-height)/2) + 'px';
    }
    // console.log(width,height,img.style.left,img.style.top,img.width,img.height);
}
function showjiaoyin()
{
    if(reshow == true)
        return;
    id('lvxing_jiaoyin').style.display = 'block';
    id('lvxing_jiaoyin').style.webkitAnimation = '';
    id('jiao1').style.webkitAnimation = 'jiao1 1s linear';
    id('jiao2').style.webkitAnimation = 'jiao2 1s 1s linear';
    id('jiao3').style.webkitAnimation = 'jiao1 1s 2s linear';
    id('jiao4').style.webkitAnimation = 'jiao4 0.8s 3s linear forwards';
    id('jiaoyin7').style.webkitAnimation = 'jiao5 1s 3.5s linear forwards';
    id('jiaoyin8').style.webkitAnimation = 'jiao5 1s 4s linear forwards';
    id('jiaoya1').style.webkitAnimation = 'jiao5 1s 4.5s linear forwards';
    id('jiaoya2').style.webkitAnimation = 'jiao5 1s 5s linear forwards';
    id('jiaoya3').style.webkitAnimation = 'jiao5 1s 5.5s linear forwards';
}
function cleanjiaoyin()
{
    if(reshow == true)
        return;
    id('lvxing_jiaoyin').style.display = 'none';
    id('jiao1').style.webkitAnimation = '';
    id('jiao2').style.webkitAnimation = '';
    id('jiao3').style.webkitAnimation = '';
    id('jiao4').style.webkitAnimation = '';
    id('jiaoyin7').style.webkitAnimation = '';
    id('jiaoyin8').style.webkitAnimation = '';
    id('jiaoya1').style.webkitAnimation = '';
    id('jiaoya2').style.webkitAnimation = '';
    id('jiaoya3').style.webkitAnimation = '';
}
function reload_scene()
{
    clearnode();
    reshow = true;
    load_images();

}
function clearnode()
{
    clearTimeout(timeout1);
    clearTimeout(timeout2);
    clearTimeout(timeout3);
    clearTimeout(timeout4);
    clearTimeout(timeout0);

    cleanshow1();
    cleanshow2();
    cleanshow3();
    cleanshow4();
    cleanjiaoyin();
    // console.log('test');
    id('bgbox').style.webkitAnimation = '';
    id('page1').style.display = 'none';
    id('lvxing_biaoqian').style.display = 'block';
    id('lvxing_biaoqian').style.webkitAnimation = '';
    
}
{wxconfig}
</script>
<script src="/design/album/tlps/common.js?v=1"></script>